import React from 'react';
import { ChatSession } from '../../KimiChat';
import { Button, Empty, List, Typography, Badge, Card, Tooltip } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import './HistoryList.scss';

interface HistoryListProps {
    sessions: ChatSession[];
    currentSessionId: string | null;
    onCreateSession: () => void;
    onDeleteSession: (sessionId: string) => void;
    onSelectSession: (sessionId: string) => void;
}

const HistoryList: React.FC<HistoryListProps> = ({
    sessions,
    currentSessionId,
    onCreateSession,
    onDeleteSession,
    onSelectSession
}) => {
    const formatDate = (date: Date) => {
        const now = new Date();
        const diff = now.getTime() - date.getTime();
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        
        if (days === 0) {
            return '今天';
        } else if (days === 1) {
            return '昨天';
        } else if (days < 7) {
            return `${days}天前`;
        } else {
            return date.toLocaleDateString();
        }
    };

    return (
        <div className="history-list">
            <div className="history-list__header">
                <Button 
                    type="primary"
                    icon={<PlusOutlined />}
                    onClick={onCreateSession}
                    className="history-list__new-btn"
                    block
                >
                    新建对话
                </Button>
            </div>
            
            <div className="history-list__content">
                {sessions.length === 0 ? (
                    <div className="history-list__empty">
                        <Empty
                            image={Empty.PRESENTED_IMAGE_SIMPLE}
                            description={
                                <>
                                    <Typography.Text strong>暂无对话历史</Typography.Text>
                                    <br />
                                    <Typography.Text type="secondary" className="history-list__empty-tip">
                                        点击上方按钮开始新对话
                                    </Typography.Text>
                                </>
                            }
                        />
                    </div>
                ) : (
                    <List
                        className="history-list__sessions"
                        itemLayout="horizontal"
                        dataSource={sessions}
                        renderItem={session => (
                            <List.Item 
                                key={session.id}
                                className={`history-list__session ${
                                    currentSessionId === session.id ? 'history-list__session--active' : ''
                                }`}
                                onClick={() => onSelectSession(session.id)}
                                actions={[
                                    <Tooltip title="删除对话" key="delete">
                                        <Button
                                            type="text"
                                            danger
                                            icon={<DeleteOutlined />}
                                            size="small"
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                onDeleteSession(session.id);
                                            }}
                                            className="history-list__delete-btn"
                                        />
                                    </Tooltip>
                                ]}
                            >
                                <Card className="history-list__session-card" bordered={false}>
                                    <div className="history-list__session-content">
                                        <Typography.Text strong className="history-list__session-title">
                                            {session.title}
                                        </Typography.Text>
                                        <div className="history-list__session-meta">
                                            <Typography.Text type="secondary" className="history-list__session-date">
                                                {formatDate(session.updatedAt)}
                                            </Typography.Text>
                                            <Badge 
                                                count={session.messages.length} 
                                                className="history-list__session-count"
                                                size="small"
                                                showZero
                                                overflowCount={999}
                                                color="#1677ff"
                                            />
                                        </div>
                                        {session.messages.length > 0 && (
                                            <Typography.Text type="secondary" className="history-list__session-preview" ellipsis>
                                                {session.messages[session.messages.length - 1].content}
                                            </Typography.Text>
                                        )}
                                    </div>
                                </Card>
                            </List.Item>
                        )}
                    />
                )}
            </div>
        </div>
    );
};

export default HistoryList;